layui.define(function (exports) {
    // 加载样式
    layui.link(layui.cache.base + 'multiple_input/multiple_input.css');

    // 定义多输入框
    var MultipleInput = function (elem, placeholder, v) {
        var _elem = this.elem = $(elem).html([
            `<div class="layui-input multiple-input">`,
            `   <div class="multiple-input-list"></div>`,
            `   <div class="multiple-input-input">`,
            `       <input type="text" placeholder="${placeholder}" data-input>`,
            `       <button type="button" data-add>添加</button>`,
            `   </div>`,
            `</div>`
        ].join('')).on('keypress', 'input[data-input]', function (e) { // 绑定输入框焦点时，输入事件，判断是否回车事件
            if (!e || !e.keyCode || e.keyCode != 13) return;

            // 触发添加按钮事件
            _elem.find('[data-add]').trigger('click');

            // 阻止事件冒泡
            return false;
        }).on('click', '[data-add]', function () { // 绑定添加按钮事件
            var value = _elem.find('input').val();
            if (!value || (v && !v(value))) return;

            // 清空输入 & 将结果显示到候选栏
            _elem.find('input[data-input]').val('');
            _elem.find('.multiple-input-list').append([
                `<div data-value="${value}">`,
                `   <span data-txt>${value}</span>`,
                `   <span data-del>&#x1006;</span>`,
                `</div>`
            ].join(''));
        }).on('click', '[data-del]', function () { // 绑定删除按钮事件
            $(this).parent().remove();
        });

        // 判断当前输入控制是否已经有值，如果有就需要渲染
        var value = this.elem.data('value');
        if (!!value && value.length > 0) {
            try {
                if (typeof value === 'string') {
                    this.setData(JSON.parse(value));
                } else if (Array.isArray(value)) {
                    this.setData(value);
                }
            } catch (error) {
                this.setData(value.split(','));
            }
        }
    }

    // 获取输入内容，数组返回
    MultipleInput.prototype.getData = function () {
        return this.elem.find('[data-value]').toArray().map((a) => {
            return $(a).data('value') + "";
        });
    }

    // 主动填充数据
    MultipleInput.prototype.setData = function (data) {
        if (!Array.isArray(data)) return false;

        var _elem = this.elem;

        // 遍历传入数据，添加到选择框
        data.forEach(function (value) {
            _elem.find('.multiple-input-list').append([
                `<div data-value="${value}">`,
                `   <span data-txt>${value}</span>`,
                `   <span data-del>&#x1006;</span>`,
                `</div>`
            ].join(''));
        });
    }

    // 获取输入内容，JSON字符串返回
    MultipleInput.prototype.getValue = function () {
        return JSON.stringify(this.getData());
    }

    // 输出MultipleInput接口
    exports('multiple_input', function (elem, placeholder, verify) {
        return new MultipleInput(elem, placeholder || '', verify);
    });
});